<template>
  <div class="preview-product-page">
    <TitleBox />
    <MiddleBox />
    <a-tabs v-model:activeKey="activeKey">
      <a-tab-pane key="1" tab="商品详情">
        <DetailBox />
      </a-tab-pane>
      <a-tab-pane key="2" tab="商品课程" force-render>
        <CourseBox />
      </a-tab-pane>
      <a-tab-pane key="3" tab="商品资料" force-render>
        <MaterialBox />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import TitleBox from './TitleBox.vue';
import MiddleBox from './MiddleBox.vue';
import DetailBox from './DetailBox.vue';
import CourseBox from './CourseBox.vue';
import MaterialBox from './MaterialBox.vue';

const activeKey = ref('2');
</script>

<style lang="scss" scoped>
.preview-product-page {
  :deep(.ant-tabs-tab) {
    font-size: 16px;
    // font-family: MicrosoftYaHei;
    color: #666666;
    transition: font-weight ease-in-out 0.3s;
    &.ant-tabs-tab-active {
      // font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
      font-weight: bold;
      color: #1890ff;
    }
  }

  :deep {
    .ant-tabs-top > .ant-tabs-nav .ant-tabs-ink-bar,
    .ant-tabs-bottom > .ant-tabs-nav .ant-tabs-ink-bar,
    .ant-tabs-top > div > .ant-tabs-nav .ant-tabs-ink-bar,
    .ant-tabs-bottom > div > .ant-tabs-nav .ant-tabs-ink-bar {
      height: 4px;
    }
  }
  :deep {
    .ant-tabs-top > .ant-tabs-nav,
    .ant-tabs-bottom > .ant-tabs-nav,
    .ant-tabs-top > div > .ant-tabs-nav,
    .ant-tabs-bottom > div > .ant-tabs-nav {
      margin-bottom: 20px;
    }
  }
}
</style>
